<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>相册类博客项目</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <!--    字体图标文件-->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <!--    Swipebox灯箱插件-->
    <link rel="stylesheet" href="./swipebox-master/src/css/swipebox.css">
    <!--    自定义css文件-->
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
<!--导航栏-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a href="index.html" class="navbar-brand"><img
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4031816500,2465166800&fm=26&gp=0.jpg"
            width="45" alt=""></a>
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarContent">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a href="index.html" class="nav-link">首页</a>
            </li>
            <li class="nav-item">
                <a href="class.html" class="nav-link">分类</a>
            </li>
            <li class="nav-item">
                <a href="blog.html" class="nav-link">博客</a>
            </li>
            <li class="nav-item">
                <a href="contact.html" class="nav-link">联系</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input type="search" class="form-inline mr-sm-2" placeholder="搜索">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </div>
</nav>
<!--选项卡组-->
<div class="container">
    <div class="menu bg-dark">
        <!--    选项卡-->
        <ul class="nav nav-pills my-4 p-2" id="myTab">
            <li>
                <a href="#pills-home" class="ab" data-toggle="pill">2020年</a>
            </li>
            <li>
                <a href="#pills-profile" data-toggle="pill">2019年</a>
            </li>
            <li>
                <a href="#pills-contact" data-toggle="pill">2018年</a>
            </li>
            <li>
                <a href="javascript:void(0);">更多</a>
            </li>
        </ul>
    </div>

    <!--    选项卡内容-->
    <div class="tab-content">
        <div class="tab-pane fade show active" id="pills-home">
            <div class="row list">
                <div class="col-4">
                    <a href="http://pic1.win4000.com/wallpaper/4/53a2af0995d64.jpg" class="swipebox" title="2020年">
                        <img src="http://pic1.win4000.com/wallpaper/4/53a2af0995d64.jpg" alt="image" class="img-fluid">
                    </a>
                </div>
                <div class="col-4"><a href="http://pic1.win4000.com/wallpaper/0/5913fef6d84f5.jpg" class="swipebox" title="2020年">
                    <img src="http://pic1.win4000.com/wallpaper/0/5913fef6d84f5.jpg" alt="image" class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://img.3dmgame.com/uploads/allimg/130515/153_130515144056_1.jpg" class="swipebox" title="2020年">
                    <img src="http://img.3dmgame.com/uploads/allimg/130515/153_130515144056_1.jpg" alt="image"
                         class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://pic1.win4000.com/wallpaper/7/56e10fb2b70a1.jpg" class="swipebox" title="2020年">
                    <img src="http://pic1.win4000.com/wallpaper/7/56e10fb2b70a1.jpg" alt="image" class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://i1.sinaimg.cn/gm/j/i/2009-02-19/U1850P115T41D160871F757DT20090219144901.jpg" class="swipebox" title="2020年">
                    <img src="http://i1.sinaimg.cn/gm/j/i/2009-02-19/U1850P115T41D160871F757DT20090219144901.jpg"
                         alt="image" class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://pic1.win4000.com/wallpaper/6/58df4ea00fdee.jpg" class="swipebox" title="2020年">
                    <img src="http://pic1.win4000.com/wallpaper/6/58df4ea00fdee.jpg" alt="image" class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://img01.3dmgame.com/uploads/allimg/140815/153_140815145803_3.jpg" class="swipebox" title="2020年">
                    <img src="http://img01.3dmgame.com/uploads/allimg/140815/153_140815145803_3.jpg" alt="image"
                         class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://pic1.win4000.com/wallpaper/7/56a9d2656071b.jpg" class="swipebox" title="2020年">
                    <img src="http://pic1.win4000.com/wallpaper/7/56a9d2656071b.jpg" alt="image" class="img-fluid"></a>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-profile">
            <div class="row list">
                <div class="col-4"><a href="http://img.3dmgame.com/uploads/allimg/130515/153_130515144056_1.jpg" class="swipebox" title="2020年">
                    <img src="http://img.3dmgame.com/uploads/allimg/130515/153_130515144056_1.jpg" alt="image"
                         class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://pic1.win4000.com/wallpaper/7/56e10fb2b70a1.jpg" class="swipebox" title="2020年">
                    <img src="http://pic1.win4000.com/wallpaper/7/56e10fb2b70a1.jpg" alt="image" class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://i1.sinaimg.cn/gm/j/i/2009-02-19/U1850P115T41D160871F757DT20090219144901.jpg" class="swipebox" title="2020年">
                    <img src="http://i1.sinaimg.cn/gm/j/i/2009-02-19/U1850P115T41D160871F757DT20090219144901.jpg"
                         alt="image" class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://pic1.win4000.com/wallpaper/6/58df4ea00fdee.jpg" class="swipebox" title="2020年">
                    <img src="http://pic1.win4000.com/wallpaper/6/58df4ea00fdee.jpg" alt="image" class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://img01.3dmgame.com/uploads/allimg/140815/153_140815145803_3.jpg" class="swipebox" title="2020年">
                    <img src="http://img01.3dmgame.com/uploads/allimg/140815/153_140815145803_3.jpg" alt="image"
                         class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://pic1.win4000.com/wallpaper/7/56a9d2656071b.jpg" class="swipebox" title="2020年">
                    <img src="http://pic1.win4000.com/wallpaper/7/56a9d2656071b.jpg" alt="image" class="img-fluid"></a>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-contact">
            <div class="row list">
                <div class="col-4"><a href="http://img.3dmgame.com/uploads/allimg/130515/153_130515144056_1.jpg" class="swipebox" title="2020年">
                    <img src="http://img.3dmgame.com/uploads/allimg/130515/153_130515144056_1.jpg" alt="image"
                         class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://pic1.win4000.com/wallpaper/7/56e10fb2b70a1.jpg" class="swipebox" title="2020年">
                    <img src="http://pic1.win4000.com/wallpaper/7/56e10fb2b70a1.jpg" alt="image" class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://i1.sinaimg.cn/gm/j/i/2009-02-19/U1850P115T41D160871F757DT20090219144901.jpg" class="swipebox" title="2020年">
                    <img src="http://i1.sinaimg.cn/gm/j/i/2009-02-19/U1850P115T41D160871F757DT20090219144901.jpg"
                         alt="image" class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://pic1.win4000.com/wallpaper/6/58df4ea00fdee.jpg" class="swipebox" title="2020年">
                    <img src="http://pic1.win4000.com/wallpaper/6/58df4ea00fdee.jpg" alt="image" class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://img01.3dmgame.com/uploads/allimg/140815/153_140815145803_3.jpg" class="swipebox" title="2020年">
                    <img src="http://img01.3dmgame.com/uploads/allimg/140815/153_140815145803_3.jpg" alt="image"
                         class="img-fluid"></a>
                </div>
                <div class="col-4"><a href="http://pic1.win4000.com/wallpaper/7/56a9d2656071b.jpg" class="swipebox" title="2020年">
                    <img src="http://pic1.win4000.com/wallpaper/7/56a9d2656071b.jpg" alt="image" class="img-fluid"></a>
                </div>
            </div>
        </div>
    </div>
</div>

<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!--swipebox插件-->
<script src="swipebox-master/lib/jquery-2.1.0.min.js"></script>
<script src="swipebox-master/src/js/jquery.swipebox.js"></script>
<script>
    jQuery(function ($) {
        $('.swipebox').swipebox({
            useCSS:true,
            useSVG:true,
            initialIndexOnArray:0,
            hideCloseButtonOnMobile:false,
            removeBarsOnMobile:true,
            hideBarsDelay:3000,
            loopAtEnd:false,
        });
    });
</script>
</body>
</html>